import React, { useState } from 'react';
import { BookOpen, MapPin, Calendar, Compass, Search, Menu, X, ChevronRight } from 'lucide-react';
import { default as Navbar, NavItem } from '../components/NavbarFix';
import Button from '../components/Button';
import Card from '../components/Card';

const GuidePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('popular');
  const [searchQuery, setSearchQuery] = useState('');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // 模拟热门目的地数据
  const popularDestinations = [
    {
      id: '1',
      name: '东京',
      country: '日本',
      imageUrl: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9reW98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '探索日本的首都，体验传统与现代的完美融合。',
      rating: 4.8,
      reviews: 1245,
      bestTime: '春季 (3-5月)',
      highlights: ['东京塔', '浅草寺', '秋叶原', '新宿御苑']
    },
    {
      id: '2',
      name: '巴黎',
      country: '法国',
      imageUrl: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyaXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '浪漫之都，艺术与文化的殿堂。',
      rating: 4.9,
      reviews: 1876,
      bestTime: '夏季 (6-8月)',
      highlights: ['埃菲尔铁塔', '卢浮宫', '巴黎圣母院', '香榭丽舍大街']
    },
    {
      id: '3',
      name: '罗马',
      country: '意大利',
      imageUrl: 'https://images.unsplash.com/photo-1558642084-73746d1a5e6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cm9tYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '永恒之城，古罗马文明的发源地。',
      rating: 4.7,
      reviews: 987,
      bestTime: '秋季 (9-11月)',
      highlights: ['罗马斗兽场', '万神殿', '特雷维喷泉', '西班牙广场']
    }
  ];

  // 模拟趋势目的地数据
  const trendingDestinations = [
    {
      id: '1',
      name: '首尔',
      country: '韩国',
      imageUrl: 'https://images.unsplash.com/photo-1569702878815-35221388c9d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2Vvd298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '融合传统与现代的韩国首都，以K-pop和美食闻名。',
      rating: 4.6,
      reviews: 765,
      trend: '+23%'
    },
    {
      id: '2',
      name: '曼谷',
      country: '泰国',
      imageUrl: 'https://images.unsplash.com/photo-1553909737-c1b5e7b547d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmFuZ2t8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '充满活力的泰国首都，以寺庙、市场和美食著称。',
      rating: 4.5,
      reviews: 1032,
      trend: '+18%'
    },
    {
      id: '3',
      name: '迪拜',
      country: '阿联酋',
      imageUrl: 'https://images.unsplash.com/photo-1577754578501-026ed7016a9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZGlidWF8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '沙漠中崛起的奢华城市，以摩天大楼和豪华酒店闻名。',
      rating: 4.7,
      reviews: 892,
      trend: '+27%'
    }
  ];

  // 模拟旅行攻略数据
  const travelGuides = [
    {
      id: '1',
      title: '日本美食指南',
      author: '旅行者小明',
      imageUrl: 'https://images.unsplash.com/photo-1553621042-f6e147245754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8amlwYW4lMjBmZW1hbnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '探索日本各地的美食，从寿司到拉面，从东京到京都。',
      likes: 456,
      comments: 123
    },
    {
      id: '2',
      title: '欧洲背包旅行攻略',
      author: '背包客小张',
      imageUrl: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZXVyb3BlfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60',
      description: '如何在一个月内背包旅行欧洲五国，省钱又充实的旅行计划。',
      likes: 789,
      comments: 234
    },
    {
      id: '3',
      title: '东南亚热带雨林探险',
      author: '探险家小李',
      imageUrl: 'https://images.unsplash.com/photo-1507666662728-990e99f34a5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c291dGhlYWQlMjBhbWF6b258ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
      description: '深入东南亚热带雨林，体验原始自然和当地文化的冒险之旅。',
      likes: 321,
      comments: 89
    }
  ];

  // 模拟旅行主题数据
  const travelThemes = [
    { id: '1', name: '文化探索', icon: <BookOpen className="h-5 w-5" /> },
    { id: '2', name: '美食之旅', icon: <MapPin className="h-5 w-5" /> },
    { id: '3', name: '历史遗迹', icon: <Calendar className="h-5 w-5" /> },
    { id: '4', name: '自然风光', icon: <Compass className="h-5 w-5" /> }
  ];

  // 导航项配置
  const navItems: NavItem[] = [
    { id: 'home', label: '首页', icon: <Compass size={20} />, path: '/' },
    { id: 'translation', label: '翻译', icon: <Search size={20} />, path: '/translation' },
    { id: 'map', label: '地图', icon: <MapPin size={20} />, path: '/map' },
    { id: 'offline', label: '离线内容', icon: <Compass size={20} />, path: '/offline-content' },
    { id: 'settings', label: '设置', icon: <Search size={20} />, path: '/settings' },
    { id: 'profile', label: '个人资料', icon: <Search size={20} />, path: '/profile' },
    { id: 'guide', label: '旅行指南', icon: <BookOpen size={20} />, path: '/guide' }
  ];

  return (
    <div className="min-h-screen bg-gray-50 pt-16">
      {/* 导航栏 */}
      <Navbar items={navItems} />

      {/* 主要内容 */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center mb-10">
          <h1 className="text-3xl font-bold text-gray-900 mb-3">发现你的下一个旅行目的地</h1>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            探索全球各地的文化、历史和自然风光，获取专业的旅行建议和实用贴士。
          </p>
        </div>

        {/* 旅行主题 */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
          {travelThemes.map((theme) => (
            <button
              key={theme.id}
              className="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="p-3 bg-blue-100 rounded-full text-blue-600 mb-3">
                {theme.icon}
              </div>
              <span className="text-sm font-medium text-gray-900">{theme.name}</span>
            </button>
          ))}
        </div>

        {/* 标签页 */}
        <div className="mb-8 border-b border-gray-200">
          <nav className="flex -mb-px space-x-8 overflow-x-auto">
            <button
              className={`pb-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'popular' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
              onClick={() => setActiveTab('popular')}
            >
              热门目的地
            </button>
            <button
              className={`pb-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'trending' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
              onClick={() => setActiveTab('trending')}
            >
              趋势目的地
            </button>
            <button
              className={`pb-4 px-1 border-b-2 font-medium text-sm ${activeTab === 'guides' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}`}
              onClick={() => setActiveTab('guides')}
            >
              旅行攻略
            </button>
          </nav>
        </div>

        {/* 目的地列表 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {activeTab === 'popular' && popularDestinations.map((destination) => (
            <Card key={destination.id} shadow="md" rounded="lg" className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <div className="relative h-48 overflow-hidden">
                <img
                  src={destination.imageUrl}
                  alt={destination.name}
                  className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <div className="absolute top-3 right-3 bg-white rounded-full px-2 py-1 text-xs font-medium text-gray-800 shadow-sm flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-yellow-500 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                  {destination.rating} ({destination.reviews})
                </div>
              </div>
              <div className="p-6">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-lg font-semibold text-gray-900">{destination.name}</h3>
                  <span className="text-sm text-gray-500 flex items-center">
                    <MapPin className="h-3 w-3 mr-1" />
                    {destination.country}
                  </span>
                </div>
                <p className="text-sm text-gray-600 mb-4 line-clamp-2">{destination.description}</p>
                <div className="mb-4">
                  <span className="text-xs font-medium text-gray-500 block mb-1">最佳旅行时间</span>
                  <span className="text-sm text-blue-600 font-medium flex items-center">
                    <Calendar className="h-3.5 w-3.5 mr-1" />
                    {destination.bestTime}
                  </span>
                </div>
                <div className="mb-4">
                  <span className="text-xs font-medium text-gray-500 block mb-1">热门景点</span>
                  <div className="flex flex-wrap gap-1">
                    {destination.highlights.map((highlight, index) => (
                      <span key={index} className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs rounded-full">
                        {highlight}
                      </span>
                    ))}
                  </div>
                </div>
                <Button variant="primary" className="w-full flex items-center justify-center">
                  查看详情 <ChevronRight size={16} className="ml-1" />
                </Button>
              </div>
            </Card>
          ))}

          {activeTab === 'trending' && trendingDestinations.map((destination) => (
            <Card key={destination.id} shadow="md" rounded="lg" className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <div className="relative h-48 overflow-hidden">
                <img
                  src={destination.imageUrl}
                  alt={destination.name}
                  className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
                <div className="absolute top-3 right-3 bg-white rounded-full px-2 py-1 text-xs font-medium text-gray-800 shadow-sm flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                  </svg>
                  热度 {destination.trend}
                </div>
              </div>
              <div className="p-6">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-lg font-semibold text-gray-900">{destination.name}</h3>
                  <span className="text-sm text-gray-500 flex items-center">
                    <MapPin className="h-3 w-3 mr-1" />
                    {destination.country}
                  </span>
                </div>
                <p className="text-sm text-gray-600 mb-4 line-clamp-2">{destination.description}</p>
                <div className="mb-4 flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-yellow-500 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                  <span className="text-sm font-medium text-gray-700">{destination.rating} ({destination.reviews} 评价)</span>
                </div>
                <Button variant="primary" className="w-full flex items-center justify-center">
                  查看详情 <ChevronRight size={16} className="ml-1" />
                </Button>
              </div>
            </Card>
          ))}

          {activeTab === 'guides' && travelGuides.map((guide) => (
            <Card key={guide.id} shadow="md" rounded="lg" className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <div className="relative h-40 overflow-hidden">
                <img
                  src={guide.imageUrl}
                  alt={guide.title}
                  className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                />
              </div>
              <div className="p-6">
                <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-1">{guide.title}</h3>
                <p className="text-xs text-gray-500 mb-3 flex items-center">
                  <span className="w-1.5 h-1.5 bg-gray-400 rounded-full mr-1.5"></span>
                  作者: {guide.author}
                </p>
                <p className="text-sm text-gray-600 mb-4 line-clamp-2">{guide.description}</p>
                <div className="flex items-center justify-between text-xs text-gray-500 mb-4">
                  <span className="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                    {guide.likes} 喜欢
                  </span>
                  <span className="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                    </svg>
                    {guide.comments} 评论
                  </span>
                </div>
                <Button variant="primary" className="w-full flex items-center justify-center">
                  阅读全文 <ChevronRight size={16} className="ml-1" />
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </main>

      {/* 页脚 */}
      <footer className="bg-white border-t border-gray-200 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="text-center text-sm text-gray-500">
            <p>© 2024 多语言旅行助手. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default GuidePage;